<template>
    <div class="detail">
        <van-notice-bar color="#ffffff" :background="toi_status>2?'#fbd8bf':'#F17F2A'">
            <p :class="{'notice':true,'black':toi_status>2}">
                <span>订单编号：{{info.order_sn}}</span>
                <span>{{showState}}</span>
            </p>
        </van-notice-bar>
        <div class="info">
            <!-- <h3 class="title">
                <span>订单详情</span>
            </h3> -->
            <ul class="infoList">
                <li>
                    <span class="label">门票信息：</span>
                    <span class="msg">{{team_active_show}}</span>
                </li>
                <li>
                    <span class="label">门票类型：</span>
                    <span class="msg">团体预约</span>
                </li>
                <li>
                    <span class="label">领队姓名：</span>
                    <span class="msg">{{info.toi_username}}</span>
                </li>
                <li>
                    <span class="label">手机号码：</span>
                    <span class="msg">{{info.toi_c_phone}}</span>
                </li>
                <li>
                    <span class="label">参观日期：</span>
                    <span class="msg">{{info.t_date}}</span>
                </li>
                <li>
                    <span class="label">下单时间：</span>
                    <span class="msg">{{info.add_time}}</span>
                </li>
                <li class="last">
                    <span class="label">参观人数：</span>
                    <span class="msg">{{info.people_num}}人</span>
                </li>
            </ul>
        </div>
        <div :class="{'qrcode': true, 'disable':info.order_status != 3||(info.order_status==3&&!info.can_refund)}" v-show="i.jp_qrcode_code" v-for="i in tickets" :key="i.ticket_id">
            <div class="left">
                <p>天士力大健康城参观门票</p>
                <p v-if="!(info.order_status != 3||(info.order_status==3&&!info.can_refund))">验证码：{{i.jp_qrcode_code}}</p>
            </div>
            <div class="right" @click="showQr(i)">
            </div>
        </div>
        <div :class="{'qrcode': true, 'disable':info.order_status!=3||(info.order_status==3&&!info.can_refund)}" v-show="info.active_code">
            <div class="left">
                <p>{{info.active_code_title}}</p>
                <p v-if="!(info.order_status!=3||(info.order_status==3&&!info.can_refund))">验证码：{{info.active_code}}</p>
            </div>
            <div class="right" @click="showActiveQr">
            </div>
        </div>
        <div class="tip" v-if="info.order_status==7">
            <h3>未通过原因：</h3>
            <p>
                {{info.team_order_mark}}
            </p>
        </div>
        <div class="cancel">
            <div class="btn" v-if="info.order_status==3" @click="cancelTicket">
                取消订单
            </div>
            <div class="btn" v-if="info.order_status==7" @click="$router.push('/teamTicket')">
                重新预约
            </div>
        </div>
        
        <van-overlay :show="show" :duration=".5">
            <div v-show="show" :class="['erweima']" >
                <div class="content">
                    <p>天士力大健康城参观门票</p>
                    <p class="code">验证码：{{qrURL}}</p>
                    <div class="qr">
                        <!-- <vue-qrcode v-if="qrURL" :value="qrURL" /> -->
                        <img :src="qrImg" alt="">
                    </div>
                </div>
                <div class="close" @click="show = false">

                </div>
            </div>
        </van-overlay>
        <van-overlay :show="activeShow" :duration=".5">
            <div v-show="activeShow" :class="['erweima']" >
                <div class="content">
                    <p>{{info.active_code_title}}</p>
                    <p class="code">验证码：{{info.active_code}}</p>
                    <div class="qr">
                        <vue-qrcode v-if="info.active_code" :value="info.active_code" />
                        <!-- <img :src="qrImg" alt=""> -->
                    </div>
                </div>
                <div class="close" @click="activeShow = false">

                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import VueQrcode from 'vue-qrcode'
    import { myTeamTicketDetail, refundTeamticketorder } from '../../../http/interface'
    import {Dialog} from 'vant'
    export default {
        name: '',
        components: {
            VueQrcode
        },
        data() {
            return {
                show: false,
                activeShow: false,
                qrURL: '',
                torder_id: '',
                info: {},
                showState: '',
                toi_status: '',
                tickets: [],
                qrImg: '',
                team_active_show: ''
            }
        },
        mounted() {
            let api_token = this.$route.query.api_token
            if(api_token) {
                localStorage.setItem('api_token', this.$route.query.api_token || '');
            }
            this.torder_id = this.$route.query.torder_id
            this.getDetail()
        },
        methods: {
            getDetail() {
                myTeamTicketDetail(this.torder_id).then(res => {
                    if(res.status == 1) {
                        let info = res.data
                        this.info = info
                        this.showState = this.info.order_status_show
                        this.tickets = this.info.titems
                        this.team_active_show = this.info.team_active_show
                    }   
                })
            },
            showQr(item) {
                if(this.info.order_status == 3&&this.info.can_refund) {
                    this.qrURL = item.jp_qrcode_code
                    this.qrImg = item.jp_qrcode
                    this.show = true
                }
            },
            showActiveQr(item) {
                if(this.info.order_status == 3&&this.info.can_refund) {
                    this.activeShow = true
                }
            },
            cancelTicket() {
                    Dialog.confirm({
                        title: '确认取消订单',
                        message: '请确认是否取消订单',
                    })
                    .then(() => {
                        if(this.info.can_refund) {
                            refundTeamticketorder(this.torder_id).then(res => {
                                if(res.status==1) {
                                    this.getDetail()
                                }else {
                                    this.$toast(res.msg)
                                }
                            })
                        }else {
                            this.$toast('不能退票')
                        }
                    })
                    .catch(() => {
                    });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../style/mixin.scss";
    .detail{
        width: 100vw;
        margin: 0 auto;
        min-height: 100vh;
        background: #EEEEEE;
        /deep/ .van-notice-bar__content{
            width: 100%;
            .notice{
                width: 100%;
                display: flex;
                justify-content: space-between;
                &.black{
                    color: #000000;
                }
            }
        }
        .info{
            background: #ffffff;
            border-radius: 0 0 24px 24px;
            padding: 0 30px;
            .title{
                span{
                    font-size:32px;
                    font-weight:500;
                    color:rgba(50,50,50,1);
                    border-left: 6px solid #E60012;
                    text-indent: 30px;
                    display: inline-block;
                }
            }
            .infoList{
                // padding: 0 30px;
                // margin-top: 28px;
                li{
                    border-bottom: 1px solid #EEEEEE;
                    line-height: 98px;

                    font-size:30px;
                    font-weight:500;
                    color:#323232;
                    display: flex;
                    .label{
                        margin-right: 70px;
                    }
                    .msg{
                        color: #777777;
                        // flex: 1;
                        p{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            color: #323232;
                        }
                    }
                    .money{
                        color: #E10028;
                    }
                    .detailed{
                        flex: 1;
                    }
                }
                .last{
                    border-bottom: none;
                }
                // .total{
                //     border-bottom: none;
                //     line-height: 1;
                //     margin-top: 35px;
                //     display: flex;
                //     justify-content: space-between;
                //     .msg{
                //         // flex: auto;
                //     }
                // }
            }
        }
        .qrcode{
            width:750px;
            height:160px;
            background:rgba(255,255,255,1);
            border-radius:24px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            .left{
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height: 60px;
            }
            .right{
                width: 96px;
                height: 96px;
                background: url('../../../../static/img/erweima.png') no-repeat center center;
                background-size: 100% 100%;
            }
            &.disable{
                .left{
                    color: #C1C1C1;
                }
                .right{
                    background: url('../../../../static/img/erweimadisable.png') no-repeat center center;
                    background-size: 100% 100%;
                }
            }
        }
        .tip{
            padding: 36px 30px;
            h3{
                font-size:30px;
                font-weight:bold;
                color:rgba(50,50,50,1);
                line-height: 1.5;
                margin-bottom: 24px;
            }
            p{
                font-size:28px;
                font-weight:400;
                color:rgba(50,50,50,1);
                line-height: 1.5;
            }
        }
        .cancel{
            min-height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .btn{
                width:520px;
                height:78px;
                background: #f17f28;
                border-radius:39px;
                font-size:34px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:78px;
                text-align: center;
            }
        }
        .erweima{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            .content{
                width: 534px;
                // height: 616px;
                background: url('../../../../static/img/erweimadibu.png') no-repeat center center;
                background-size: 100% 100%;
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height: 60px;
                text-align: center;
                padding: 29px;
                padding-bottom: 50px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .code{
                    white-space: nowrap;
                }
                .qr{
                    width: 360px;
                    height: 360px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .close{
                width: 74px;
                height: 74px;
                background: url('../../../../static/img/guanb.png') no-repeat center center;
                background-size: 100% 100%;
                margin-top: 96px;
            }
        }
    }
</style>